iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0

前言

今天就來點可以讓大家在排版時能夠更多樣更方便的方式吧

display : flex

在寫今天的講的所有屬性前,都必須先宣告 display : flex ;
否則今天講的屬性都會沒辦法使用

.class{
    display:flex;
}

Flex 屬性

Flex 可以分為內容器外容器
https://ithelp.ithome.com.tw/upload/images/20210905/20141189wpNUl9Z2MV.jpg

flex-direction

flex-direction : 元件排序的方向,由於此排序方向會影響軸線
所以在進行之前,我們要先知道預設的軸線方向為何!
https://ithelp.ithome.com.tw/upload/images/20210905/20141189wcrskkhFrW.png

知道預設軸線位置後,我們利用以下這四個,去改變我們軸線的方向

  • flex-direction : row ; 橫排
  • flex-direction : column ; 直排
  • flex-direction : row-reverse ; 左右順序顛倒
  • flex-direction : column-reverse ; 上下順序顛倒
    https://ithelp.ithome.com.tw/upload/images/20210905/201411892IjVG4swb2.jpg

flex-wrap

flex-wrap : 超出範圍時是否換行

  • flex-wrap: nowrap ; 不換行
  • flex-wrap: wrap ; 換行
  • flex-wrap: wrap-reverse ; 換行後反轉

order

order 調整元素、物件的順序

一開始的順序
https://ithelp.ithome.com.tw/upload/images/20210906/20141189GCcXWmDGSD.png
程式碼中寫入order後

order : 1 ;

順序變更後,如下
https://ithelp.ithome.com.tw/upload/images/20210906/20141189XnKChMhzg0.png

Flex 就先講到這邊,明天談談 justify-content 好了
那我們鐵人賽Day7見囉!!


上一篇
鐵人賽 Day5 -- 一定要知道的 CSS (二) - display屬性的應用
下一篇
鐵人賽 Day7 -- 一定要知道的 CSS (四) -Justify-content
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言